<template>
  <a-modal :visible="visible" @cancel="handleCancel" wrapClassName="many-confirm-modal">
    <template slot="title">
      <div class="disFlxAC gap-10">
        <a-icon type="exclamation-circle" theme="filled" style="color:#2878FF;line-height: 22px;" />
        <span>{{ modalData.title }}</span>
      </div>
    </template>
    <p>{{ modalData.content }}</p>
    <template slot="footer">
      <a-button v-for="(btn, index) in modalData.btns" v-bind="btn.props" :key="index" @click="btn.onClick">
        {{ btn.text }}
      </a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      modalData: {
        title: '',
        content: '',
        btns: []
      }
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
    },
    open(data) {
      this.modalData = data
      this.visible = true
    }
  }
}
</script>
<style lang="less">
.many-confirm-modal {
  .ant-modal-header {
    border: 0;
  }
  .ant-modal-footer {
    border: 0;
  }
}
</style>
